<template>
  <ElDialog
    :close-on-click-modal="false"
    :show-close="false"
    :fullscreen="fullscreen"
    draggable
    header-class="dialog_header"
    body-class="dialog_body"
    footer-class="dialog_footer"
    class="dialog"
    top="3vh"
    v-bind="$attrs"
    @closed="handleClosed"
  >
    <template #header>
      <div class="header">
        <div class="title">
          <slot name="header">
            {{ title }}
          </slot>
        </div>
        <div class="icons">
          <!-- 功能性按钮 -->
          <slot name="actions"></slot>
          <span class="split" v-show="$slots.actions"></span>
          <el-icon @click="fullscreen = !fullscreen"><FullScreen /></el-icon>
          <el-icon @click="handleClose" v-show="showClose"><Close /></el-icon>
        </div>
      </div>
    </template>
    <ElScrollbar height="100%" always class="dialog_content">
      <div>
        <slot></slot>
      </div>
    </ElScrollbar>
    <template #footer>
      <div>
        <ElButton v-show="showClose" @click="handleClose">
          {{ cancelText }}
        </ElButton>
        <ElButton type="primary" v-show="showConfirm" @click="handleConfirm">
          {{ confirmText }}
        </ElButton>
        <slot name="footer"></slot>
      </div>
    </template>
  </ElDialog>
</template>

<script setup name="Dialog">
import { computed, useAttrs, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  title: String,
  autoOpen: { type: Boolean, default: false },
  dialogAutoOpen: { type: String, default: "isOpenDialog" }, // 自动打开弹窗的路由参数
  confirmText: String,
  cancelText: String,
  showClose: { type: Boolean, default: true },
  showConfirm: { type: Boolean, default: true },
  confirmAutoClose: { type: Boolean, default: false }, // 确定后自动关闭
});
const attrs = useAttrs();
const route = useRoute();
const emits = defineEmits(["update:modelValue", "closed", "confirm"]);
// 确认文字
const confirmText = computed(() => {
  return props.confirmText || t("common.Confirm");
});
// 取消文字
const cancelText = computed(() => {
  return props.cancelText || t("common.Cancel");
});
const fullscreen = ref(false);

// 自动打开弹窗
if (route.query[props.dialogAutoOpen] && props.autoOpen) {
  emits("update:modelValue", true);
}
// 关闭
function handleClose() {
  emits("update:modelValue", false);
}
// 关闭动画结束后
function handleClosed() {
  fullscreen.value = false;
  emits("closed");
}

function handleConfirm() {
  emits("confirm");
  if (props.confirmAutoClose) {
    handleClose();
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.icons {
  display: flex;
  align-items: center;
}
.icons .split {
  width: 1px;
  height: 80%;
  vertical-align: middle;
  position: relative;
  border-left: 2px solid var(--border-color);
}
.icons > * + * {
  margin-left: 10px;
}

.dialog_content {
  flex: 1;
  min-height: 0; /* 关键 */
}
</style>
